<template>
  <div class="gj-xx-main2" :class="newclass" v-if="main2">
    <div class="box">
      <div class="gj-tit5 wow animated fadeInUp"><b class="sp">{{title}}</b></div>
      <div class="tab1 flex-ct">
        <span v-for="(item, i) in main2" :key="i" class="cur item flex-ct" :class="{on: m2idx1 == i}" @mouseenter="getM2Idx('m2idx1',i)">{{item.name}}</span>
      </div>
      <div class="flex-bect bottom" style="align-items: stretch;">
        <div class="tab2">
          <dl class="con">
            <dd v-for="(item, j) in main2[m2idx1].area" :key="j" class="cur item flex-ct" :class="{on: m2idx2 == j}" @click="getM2Idx('m2idx2',j)">{{item.name}}</dd>
          </dl>
        </div>
        <div class="tab-con">
          <div class="tab-ban ov" v-if="curdata">
            <div class="swiper-wrapper">
              <div v-for="(item, j) in curdata" :key="j" class="swiper-slide">
                <div class="list flex-lect">
                  <a v-for="(item2, k) in item" :key="k" href="" class="item">
                    <div class="imgW"><img :src="item2.src" alt="" class="img"></div>
                    <div class="div">
                      <div class="h2">{{item2.name}}</div>
                      <div class="labs flex-lect">
                        <div v-for="(item3, k) in item2.kc" :key="k" class="lab">{{item3}}</div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="flex-ct">
              <span class="arrow prev"></span>
              <span class="arrow next"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let mySwiper1 = null;//销毁实例
// 不支持 import
module.exports = {
  props:{
    main2:null,
    curdata:null,
    newclass:{
      type:String,
      default:""
    },
    router:{},
    title:{
      type:String,
      default:""
    },
  },
  data: function () {
    return {
      m2idx1:0, // 顶部城市的下标
      m2idx2:0, // 左侧城市区域的下标
    };
  },
  watch:{
    curdata(n, o){
      if(n){
        if(mySwiper1){
          mySwiper1.destroy(true);//销毁实例
        }
        this.creatBan()
      }
    }
  },
  components: {},
  mounted(){
    if(this.main2){
      this.creatBan()
    }
  },
  methods:{
    getM2Idx(name, idx){
      this[name] = idx;
      this.$emit('getidx',{idx1:this.m2idx1, idx2:this.m2idx2})
      
    },
    creatBan(){
      setTimeout(()=>{
        mySwiper1 = new Swiper('.gj-xx-main2 .tab-ban', {
          slidesPerView: 1,
          spaceBetween: 30,
          navigation: {
            nextEl: '.gj-xx-main2 .next',
            prevEl: '.gj-xx-main2 .prev',
          },
          autoplay:true
        });
      },500)
    },
  }
};
</script>

<style>

</style>